@import './../app/variablesV2.css';

.inputs {
  flex-wrap: wrap;
  margin-top: 12px;

  & > span {
    margin: 12px 0;

    & input {
      text-align: center;
    }
  }
}

.errorMessage {
  color: var(--color-error);
  display: block;
  font-family: var(--content-font);
  font-size: var(--paragraph-font-size-l);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.47;
  min-height: 22px;
  opacity: 0;
  text-align: right;
  transition: opacity var(--animation-speed-fast) linear;
  width: 100%;

  &.showError {
    opacity: 1;
  }
}

.showPassphrase {
  display: flex;

  & > input {
    display: none;

    &:checked + .fakeCheckbox {
      background-color: var(--color-primary-standard);
      border-color: var(--color-primary-standard);
    }
  }

  & .fakeCheckbox {
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-dark-gray);
    border-radius: var(--border-radius-standard);
    box-sizing: border-box;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    height: 24px;
    transition:
      background var(--animation-speed-fast) linear,
      border var(--animation-speed-fast) linear,
      color var(--animation-speed-fast) linear;
    width: 24px;

    & > .icon {
      font-size: var(--paragraph-font-size-s);
    }
  }

  & .label {
    color: var(--color-content-light);
    font-family: var(--content-font);
    font-size: var(--paragraph-font-size-l);
    font-weight: var(--font-weight-semi-bold);
    line-height: 1.47;
    margin-left: 8px;
  }
}
